<template>
  <div style="height: 500px;overflow-y: scroll">
    <avue-crud style="height: 100% "
               class="basis-xl right-view"
               :option="option"
               :page="page"
               @on-load="onLoad"
               :data="exportData"
               @search-change="searchChange"
    >
      <template #menu-left="{}">
        <el-button type="success" @click="exportBtnClick">
          导出
        </el-button>
      </template>
    </avue-crud>
  </div>


</template>

<script>
import {reactive, toRefs} from "vue";
import {processAppConfig} from "@/util/appConfigUtil";
import _ from "lodash";

const appConfig = processAppConfig()
import {loadCustomVariableMap, replaceAllByMap} from "@/util/examArrangeUtil";
import {exportDataToFile} from "@/util/exportUtil";

export default {
  name: "ExportPreviewView",
  setup(props, {emit}) {
    console.log(emit)
    const curdData = reactive({
      option: {
        excelBtn: true,
        columnSort: true,
        index: true,
        addBtn: false,
        delBtn: false,
        rowKey: 'examId',
        // rowParentKey: 'pid',
        defaultExpandAll: true,
        column: [
          ...appConfig.exportConfig.exportColumn.map(item => {
            return appConfig.columnDefines[item]
          })
        ]
      },
      exportData: [],
      search: {},
      originData: [],
      filterData: [],
      pageData: [],
      page: {
        total: 1000,
        currentPage: 1,
        pageSize: 10,
        pageSizes: [5, 10, 15, 20, 50, 100]
      },
      props: {}

    })


    //数据分页
    function subPage(data = []) {
      let {currentPage, pageSize} = curdData.page

      curdData.pageData = _.chunk(data, pageSize)
      curdData.page.total = data.length;

      curdData.exportData = curdData.pageData[currentPage - 1]
    }


    function onLoad(page) {
      let {pageSize, currentPage} = page
      curdData.page.currentPage = currentPage
      curdData.page.pageSize = pageSize


      curdData.filterData = filterData(curdData.originData)
      subPage(curdData.filterData);
    }

    //过滤数据
    function filterData(data) {
      return data;
    }

    function loadData(data, props) {

      console.log("loadData")
      curdData.originData = data
      curdData.filterData = curdData.originData
      curdData.props = props
      subPage(curdData.filterData);
    }

    function searchChange(params, done) {
      curdData.filterData = curdData.originData.filter(item => {
        let flag = true;
        console.log(item)
        for (let paramsKey in params) {
          console.log(item[paramsKey], params[paramsKey])
          flag = flag && item[paramsKey] === params[paramsKey]
        }
        return flag;

      })

      subPage(curdData.filterData);
      done()
    }


    //导出
    function exportBtnClick() {
      let fileName = replaceAllByMap(appConfig.exportConfig.fileName, createVariableMap())
      exportDataToFile(curdData.originData, fileName)
    }


    function createVariableMap() {
      let variableMap = new Map();
      loadCustomVariableMap(variableMap)
      for (let propsKey in curdData.props) {
        variableMap.set(propsKey, curdData.props[propsKey])
      }
      return variableMap;
    }


    //处理确认
    function handleSubmit() {

    }

    return {
      ...toRefs(curdData),
      onLoad,
      subPage,
      loadData,
      searchChange,
      exportBtnClick,
      handleSubmit
    }

  }
}
</script>

<style scoped>

</style>